@import url("https://fonts.googleapis.com/css2?family=Noto+Serif:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Noto+Sans:wght@300;400;500;600&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Inter:wght@300;400;500;600&display=swap");

@import "tailwindcss";

@theme {
	/* Define fonts */
	--font-sans: "Noto Sans", system-ui, sans-serif;
	--font-serif: "Noto Serif", serif;

	/* Define custom spacing */
	--spacing-sidebar: 280px;

	/* Define custom colors */
	--color-paper: #fafafa;
	--color-card: #ffffff;

	/* Define border radius */
	--radius-DEFAULT: 0.5rem;
}

:root {
	font-synthesis: none;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.book-app-container {
	width: 100%;
	min-height: 100vh;
}

body {
	@apply bg-gray-50 text-gray-900 font-sans leading-relaxed;
	margin: 0;
	padding: 0;
}

h1 {
	@apply text-3xl md:text-4xl font-bold text-gray-900 font-serif mb-6 leading-tight;
}

h2 {
	@apply text-2xl font-semibold text-gray-900 font-serif mb-4 leading-tight;
}

h3 {
	@apply text-xl font-semibold text-gray-900 font-serif mb-5 leading-snug;
}

h4 {
	@apply text-lg font-medium text-gray-900 font-serif mb-3;
}

p {
	@apply text-gray-900 leading-relaxed mb-4;
}

/* Line clamp utilities */
.line-clamp-1 {
	overflow: hidden;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 1;
}

.line-clamp-2 {
	overflow: hidden;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}

.line-clamp-3 {
	overflow: hidden;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
}

/* Layout components */
.layout {
	@apply flex min-h-screen bg-gray-50;
}

.sidebar {
	@apply fixed top-0 left-0 h-full w-[280px] bg-white border-r border-gray-200 pt-10 pb-6 overflow-y-auto z-10;
}

.sidebar-title {
	@apply font-serif text-lg font-semibold px-6 mb-8;
}

.sidebar-nav {
	@apply space-y-1 px-3;
}

.sidebar-link {
	@apply block px-3 py-2 text-gray-900 hover:bg-blue-50 rounded-lg transition-colors font-sans text-sm;
}

.sidebar-link-active {
	@apply block px-3 py-2 bg-blue-50 text-blue-800 font-medium rounded-lg font-sans text-sm;
}

.sidebar-section {
	@apply pt-6 pb-2;
}

.sidebar-heading {
	@apply px-6 mb-2 text-xs font-medium text-gray-900 uppercase tracking-wider;
}

.main-content {
	@apply ml-[280px] flex-1 py-8 px-6 md:px-10 relative z-0;
}

.page-header {
	@apply mb-12;
}

/* Card components */
.card {
	@apply bg-white rounded-lg border border-gray-200 p-6 transition-all hover:border-gray-300;
}

.book-card {
	@apply bg-white rounded-lg overflow-hidden border border-gray-200 transition-all hover:border-gray-500;
}

.book-card-image {
	@apply h-60 overflow-hidden;
}

.book-card-image img {
	@apply object-contain;
}

.book-card-content {
	@apply p-5 space-y-3;
}

/* Button components */
.btn {
	@apply px-4 py-2 rounded-lg border border-blue-800 text-blue-800 bg-white 
  transition-colors hover:bg-blue-50 focus:outline-none focus:ring-1 
  focus:ring-blue-800 font-sans;
}

.btn-primary {
	@apply px-4 py-2 rounded-lg bg-black text-white border-0 
  transition-colors hover:bg-gray-800 focus:outline-none focus:ring-1 
  focus:ring-black font-sans;
}

.btn-subtle {
	@apply px-4 py-2 rounded-lg bg-transparent text-gray-600 hover:text-blue-800
  transition-colors font-sans;
}

/* Performance metrics components */
.metrics-container {
	@apply grid grid-cols-1 md:grid-cols-3 gap-6 mb-8;
}

.metric-card {
	@apply bg-white p-5 rounded-lg border border-gray-200;
}

.metric-value {
	@apply text-3xl font-serif text-gray-900 mb-1;
}

.metric-label {
	@apply text-sm text-gray-500 font-sans;
}

/* Breadcrumbs */
.breadcrumbs {
	@apply flex items-center space-x-2 mb-4;
}

.breadcrumb-item {
	@apply flex items-center;
}

.breadcrumb-link {
	@apply text-sm text-gray-900 hover:text-blue-900 cursor-pointer;
}

.breadcrumb-separator {
	@apply text-gray-900 mx-2;
}

.breadcrumb-current {
	@apply text-sm text-blue-600 font-medium;
}

/* Tables */
.data-table {
	@apply w-full text-left border-collapse;
}

.data-table th {
	@apply px-4 py-3 border-b border-gray-200 text-xs font-medium text-gray-500 uppercase tracking-wider;
}

.data-table td {
	@apply px-4 py-3 border-b border-gray-200 text-sm text-gray-600;
}

.data-table tbody tr:last-child td {
	@apply border-b-0;
}

/* Mock Data Banner Styling */
.mock-data-banner {
	@apply bg-blue-50 border border-blue-300 rounded-lg my-4 p-4 relative;
}

.banner-content {
	@apply text-black;
}

.banner-content h2 {
	@apply text-xl font-semibold mb-2;
}

.banner-content p {
	@apply mb-3;
}

.banner-content ol {
	@apply list-decimal ml-6;
}

.banner-content li {
	@apply mb-1;
}

.banner-content a {
	@apply text-blue-600 underline hover:text-blue-800;
}
